<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title>产品详情页</title>
    <link rel="icon" href="./img/favicon.ico">

    <link rel="stylesheet" type="text/css" href="./css/all.css"/>
    <link rel="stylesheet" type="text/css" href="./css/pages-item.css"/>
    <link rel="stylesheet" type="text/css" href="./css/pages-zoom.css"/>
</head>

<body>
<!-- 头部栏位 -->
<!--页面顶部-->
<div id="nav-bottom" th:insert="index-nav::index-nav">
    <!--顶部-->
</div>

<!-- 商品分类导航 -->
<div class="typeNav">
    <div class="py-container">
        <div class="yui3-g NavList">
            <div class="all-sorts-list">
                <div class="yui3-u Left all-sort">
                    <h4>全部商品分类</h4>
                </div>
                <div class="sort">
                    <div class="all-sort-list2">
                    </div>
                </div>
            </div>
            <div class="yui3-u Center navArea">
                <ul class="nav">
                    <li class="f-item">服装城</li>
                    <li class="f-item">美妆馆</li>
                    <li class="f-item">青橙超市</li>
                    <li class="f-item">全球购</li>
                    <li class="f-item">闪购</li>
                    <li class="f-item">团购</li>
                    <li class="f-item">有趣</li>
                    <li class="f-item">
                        <a href="seckill-index.html" target="_blank">秒杀</a>
                    </li>
                </ul>
            </div>
            <div class="yui3-u Right"></div>
        </div>
    </div>
</div>
<div class="py-container">
    <div id="item">
        <div class="crumb-wrap">
            <ul class="sui-breadcrumb">
                <li>
                    <a href="#">手机、数码、通讯</a>
                </li>
                <li>
                    <a href="#">手机</a>
                </li>
                <li>
                    <a href="#">Apple苹果</a>
                </li>
                <li class="active">iphone 6S系类</li>
            </ul>
        </div>
        <!--product-info-->
        <div class="product-info">
            <div class="fl preview-wrap">
                <!--放大镜效果-->
                <div class="zoom">
                    <!--默认第一个预览-->
                    <div id="preview" class="spec-preview">
							<span class="jqzoom">
								<img jqimg="" th:jqimg="${commodity.img}" th:src="${commodity.img}"/>
							</span>
                    </div>
                    <!--下方的缩略图-->
                </div>
            </div>
            <div class="fr itemInfo-wrap">
                <div class="sku-name">
                    <h4 th:text="${commodity.name}"></h4>
                </div>

                <div class="summary">
                    <div class="summary-wrap">
                        <div class="fl title">
                            <i>价　　格</i>
                        </div>
                        <div class="fl price">
                            <i>¥</i>
                            <em th:text="${commodity.price}"></em>
                        </div>
                    </div>
                </div>
                <div class="support">
                    <div class="summary-wrap">
                        <div class="fl title">
                            <i>支　　持</i>
                        </div>
                        <div class="fl fix-width">
                            <em class="t-gray">支付宝支付</em>
                        </div>
                    </div>
                </div>
                <div class="clearfix choose">
                    <!--	<div id="specification" class="summary-wrap clearfix">
                            <dl>
                                <dt>
                                    <div class="fl title">
                                        <i>选择颜色</i>
                                    </div>
                                </dt>
                                <dd>
                                    <a href="javascript:;" class="selected">金色
                                        <span title="点击取消选择">&nbsp;</span>
                                    </a>
                                </dd>
                                <dd>
                                    <a href="javascript:;">银色</a>
                                </dd>
                                <dd>
                                    <a href="javascript:;">黑色</a>
                                </dd>
                            </dl>
                            <dl>
                                <dt>
                                    <div class="fl title">
                                        <i>内存容量</i>
                                    </div>
                                </dt>
                                <dd>
                                    <a href="javascript:;" class="selected">16G
                                        <span title="点击取消选择">&nbsp;</span>
                                    </a>
                                </dd>
                                <dd>
                                    <a href="javascript:;">64G</a>
                                </dd>
                                <dd>
                                    <a href="javascript:;" class="locked">128G</a>
                                </dd>
                            </dl>
                            <dl>
                                <dt>
                                    <div class="fl title">
                                        <i>选择版本</i>
                                    </div>
                                </dt>
                                <dd>
                                    <a href="javascript:;" class="selected">公开版
                                        <span title="点击取消选择">&nbsp;</span>
                                    </a>
                                </dd>
                                <dd>
                                    <a href="javascript:;">移动版</a>
                                </dd>
                            </dl>
                            <dl>
                                <dt>
                                    <div class="fl title">
                                        <i>购买方式</i>
                                    </div>
                                </dt>
                                <dd>
                                    <a href="javascript:;" class="selected">官方标配
                                        <span title="点击取消选择">&nbsp;</span>
                                    </a>
                                </dd>
                                <dd>
                                    <a href="javascript:;">移动优惠版</a>
                                </dd>
                                <dd>
                                    <a href="javascript:;" class="locked">电信优惠版</a>
                                </dd>
                            </dl>
                            <dl>
                                <dt>
                                    <div class="fl title">
                                        <i>套　　装</i>
                                    </div>
                                </dt>
                                <dd>
                                    <a href="javascript:;" class="selected">保护套装
                                        <span title="点击取消选择">&nbsp;</span>
                                    </a>
                                </dd>
                                <dd>
                                    <a href="javascript:;" class="locked">充电套装</a>
                                </dd>

                            </dl>
                        </div>-->

                    <form action="/buy" method="get" name="frm">
						<input type="hidden" th:value="${commodity.id}" name="cid">
                        <div class="summary-wrap">
                            <div class="fl title">
                                <div class="control-group">
                                    <div class="controls">
                                        <input autocomplete="off" type="text" value="1" minnum="1" class="itxt"
                                               name="num"/>
                                        <a href="javascript:add()" class="increment plus">+</a>
                                        <a href="javascript:sub()" class="increment mins">-</a>
                                    </div>
                                </div>
                            </div>
                            <div class="fl">
                                <ul class="btn-choose unstyled">
                                    <li>
                                        <button type="submit" target="_blank"
                                           class="sui-btn  btn-danger addshopcar">立即购买</button>
                                    </li>
                                    <li>
                                        <button onclick="addCart()" target="_blank"
                                           class="sui-btn  btn-danger addshopcar">加入购物车</button>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!--product-detail-->
        <div class="clearfix product-detail">
            <div class="fl aside">
                <ul class="sui-nav nav-tabs tab-wraped">
                    <li class="active">
                        <a href="#index" data-toggle="tab">
                            <span>店家商品</span>
                        </a>
                    </li>
                </ul>
                <div class="tab-content tab-wraped">
                    <div id="index" class="tab-pane active">
                        <ul class="goods-list unstyled">
                            <li th:each="c : ${commodityList}">
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <img th:src="${c.img}"/>
                                    </div>
                                    <div class="attr">
                                        <em th:text="${c.name}"></em>
                                    </div>
                                    <div class="price">
                                        <strong>
                                            <em>¥</em>
                                            <i th:text="${c.price}"></i>
                                        </strong>
                                    </div>
                                    <div class="operate">
                                        <a th:href="'/cart/save?num=1&id'+${c.id}" class="sui-btn btn-bordered">加入购物车</a>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>

                </div>
            </div>
            <div class="fr detail">
                <div class="tab-main intro">
                    <ul class="sui-nav nav-tabs tab-wraped">
                        <li class="active">
                            <a href="#one" data-toggle="tab">
                                <span>商品介绍</span>
                            </a>
                        </li>
                        <li>
                            <a href="#four" data-toggle="tab">
                                <span>商品评价</span>
                            </a>
                        </li>
                    </ul>
                    <div class="clearfix"></div>
                    <div class="tab-content tab-wraped">
                        <div id="one" class="tab-pane active" th:utext="${commodity.description}">

                        </div>
                        <div id="four" class="tab-pane">
                            <div class="comment">
                                <div class="com-tit">商品评价</div>
                                <div class="com-tab-type">
                                    <div class="content">
                                        <div class="com-item" th:each="rep :${repList}">
                                            <div class="user-column">
                                                <div class="username">
                                                    <img src="./img/_/photo.jpg"/><span th:text="${rep.uname}"></span>
                                                </div>
                                            </div>
                                            <div class="user-info">
                                                <span th:utext="${rep.content}"></span>
                                                <div class="guige">
                                                    <ul class="mini">
                                                        <li th:text="${rep.createtimme}"></li>
                                                    </ul>
                                                    <div class="operate">

                                                    </div>
                                                    <div class="clearfix"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <!--like-->
        <div class="clearfix"></div>
    </div>
</div>
<!-- 底部栏位 -->
<!--页面底部-->
<div class="clearfix footer">
    <div class="py-container">
        <div class="footlink">
            <div class="Mod-service">
                <ul class="Mod-Service-list">
                    <li class="grid-service-item intro  intro1">

                        <i class="serivce-item fl"></i>
                        <div class="service-text">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>

                    </li>
                    <li class="grid-service-item  intro intro2">

                        <i class="serivce-item fl"></i>
                        <div class="service-text">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>

                    </li>
                    <li class="grid-service-item intro  intro3">

                        <i class="serivce-item fl"></i>
                        <div class="service-text">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>

                    </li>
                    <li class="grid-service-item  intro intro4">

                        <i class="serivce-item fl"></i>
                        <div class="service-text">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>

                    </li>
                    <li class="grid-service-item intro intro5">

                        <i class="serivce-item fl"></i>
                        <div class="service-text">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>

                    </li>
                </ul>
            </div>
            <div class="clearfix Mod-list">
                <div class="yui3-g">
                    <div class="yui3-u-1-6">
                        <h4>购物指南</h4>
                        <ul class="unstyled">
                            <li>购物流程</li>
                            <li>会员介绍</li>
                            <li>生活旅行/团购</li>
                            <li>常见问题</li>
                            <li>购物指南</li>
                        </ul>

                    </div>
                    <div class="yui3-u-1-6">
                        <h4>配送方式</h4>
                        <ul class="unstyled">
                            <li>上门自提</li>
                            <li>211限时达</li>
                            <li>配送服务查询</li>
                            <li>配送费收取标准</li>
                            <li>海外配送</li>
                        </ul>
                    </div>
                    <div class="yui3-u-1-6">
                        <h4>支付方式</h4>
                        <ul class="unstyled">
                            <li>货到付款</li>
                            <li>在线支付</li>
                            <li>分期付款</li>
                            <li>邮局汇款</li>
                            <li>公司转账</li>
                        </ul>
                    </div>
                    <div class="yui3-u-1-6">
                        <h4>售后服务</h4>
                        <ul class="unstyled">
                            <li>售后政策</li>
                            <li>价格保护</li>
                            <li>退款说明</li>
                            <li>返修/退换货</li>
                            <li>取消订单</li>
                        </ul>
                    </div>
                    <div class="yui3-u-1-6">
                        <h4>特色服务</h4>
                        <ul class="unstyled">
                            <li>夺宝岛</li>
                            <li>DIY装机</li>
                            <li>延保服务</li>
                            <li>品优购E卡</li>
                            <li>品优购通信</li>
                        </ul>
                    </div>
                    <div class="yui3-u-1-6">
                        <h4>帮助中心</h4>
                        <img src="./img/wx_cz.jpg">
                    </div>
                </div>
            </div>
            <div class="Mod-copyright">
                <ul class="helpLink">
                    <li>关于我们
                        <span class="space"></span>
                    </li>
                    <li>联系我们
                        <span class="space"></span>
                    </li>
                    <li>关于我们
                        <span class="space"></span>
                    </li>
                    <li>商家入驻
                        <span class="space"></span>
                    </li>
                    <li>营销中心
                        <span class="space"></span>
                    </li>
                    <li>友情链接
                        <span class="space"></span>
                    </li>
                    <li>关于我们
                        <span class="space"></span>
                    </li>
                    <li>营销中心
                        <span class="space"></span>
                    </li>
                    <li>友情链接
                        <span class="space"></span>
                    </li>
                    <li>关于我们</li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!--页面底部END-->
<!--侧栏面板开始-->

<script type="text/javascript" src="/js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="/js/plugins/jquery.jqzoom/jquery.jqzoom.js"></script>
<script type="text/javascript" src="/js/plugins/jquery.jqzoom/zoom.js"></script>
</body>

<script>
    function add() {
            frm.num.value = frm.num.value + 1
    }
    function sub() {
        if(frm.num.value == 1) {
            return
        } else {
            frm.num.value = frm.num.value - 1
        }
    }
    function addCart() {
        frm.action = "/cart/save"
    }
</script>
</html>